<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('代码覆盖率报告管理')"/>
    <style>
        /* 商务风格主题色彩 */
        :root {
            --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            --secondary-gradient: linear-gradient(45deg, #4facfe 0%, #00f2fe 100%);
            --success-gradient: linear-gradient(45deg, #56ab2f 0%, #a8e6cf 100%);
            --warning-gradient: linear-gradient(45deg, #f093fb 0%, #f5576c 100%);
            --shadow-primary: 0 8px 32px rgba(102, 126, 234, 0.15);
            --shadow-secondary: 0 4px 20px rgba(0, 0, 0, 0.08);
            --border-radius: 12px;
        }

        .business-header {
            background: var(--primary-gradient);
            color: white;
            padding: 30px;
            border-radius: var(--border-radius);
            margin-bottom: 25px;
            box-shadow: var(--shadow-primary);
            position: relative;
            overflow: hidden;
        }
        .business-header::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 100px;
            height: 100px;
            background: rgba(255,255,255,0.1);
            border-radius: 50%;
            transform: translate(30px, -30px);
        }
        .business-header h1 {
            margin: 0;
            font-size: 28px;
            font-weight: 700;
            letter-spacing: -0.5px;
        }
        .business-header p {
            margin: 8px 0 0 0;
            opacity: 0.9;
            font-size: 16px;
            font-weight: 300;
        }

        .search-panel {
            background: white;
            border-radius: var(--border-radius);
            padding: 25px;
            box-shadow: var(--shadow-secondary);
            margin-bottom: 25px;
            border: 1px solid rgba(0,0,0,0.05);
        }

        .btn-business {
            background: var(--primary-gradient);
            border: none;
            color: white;
            padding: 10px 20px;
            border-radius: 8px;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            font-weight: 500;
            letter-spacing: 0.5px;
            position: relative;
            overflow: hidden;
        }
        .btn-business::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
            transition: left 0.5s;
        }
        .btn-business:hover::before {
            left: 100%;
        }
        .btn-business:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
            color: white;
        }
        .btn-business.btn-xs {
            padding: 6px 12px;
            font-size: 12px;
            border-radius: 6px;
        }

        .table-container {
            background: white;
            border-radius: var(--border-radius);
            padding: 25px;
            box-shadow: var(--shadow-secondary);
            border: 1px solid rgba(0,0,0,0.05);
        }

        /* 专业级表格样式 */
        #bootstrap-table {
            border-collapse: separate;
            border-spacing: 0;
            border-radius: var(--border-radius);
            overflow: hidden;
            box-shadow: var(--shadow-secondary);
        }
        
        .fixed-table-container {
            border-radius: var(--border-radius);
            overflow: hidden;
        }
        
        .fixed-table-header {
            background: var(--primary-gradient);
        }
        
        .fixed-table-header th {
            background: transparent !important;
            color: white !important;
            font-weight: 600 !important;
            padding: 15px 12px !important;
            border: none !important;
            font-size: 13px;
            letter-spacing: 0.5px;
            text-transform: uppercase;
        }
        
        .fixed-table-body tbody tr {
            transition: all 0.2s ease;
            border-bottom: 1px solid #f0f0f0;
        }
        
        .fixed-table-body tbody tr:hover {
            background: linear-gradient(90deg, rgba(102, 126, 234, 0.05), rgba(118, 75, 162, 0.05));
            transform: scale(1.01);
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        }
        
        .fixed-table-body td {
            padding: 15px 12px !important;
            vertical-align: middle !important;
            border: none !important;
            font-size: 13px;
        }
        
        .fixed-table-body tbody tr:last-child {
            border-bottom: none;
        }

        /* 覆盖率徽章升级 */
        .coverage-badge {
            display: inline-flex;
            align-items: center;
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 11px;
            font-weight: 600;
            color: white;
            position: relative;
            overflow: hidden;
            min-width: 60px;
            justify-content: center;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        .coverage-badge::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
            transition: left 0.6s;
        }
        .coverage-badge:hover::before {
            left: 100%;
        }
        
        .coverage-high { 
            background: var(--success-gradient);
            box-shadow: 0 4px 15px rgba(86, 171, 47, 0.3);
        }
        .coverage-medium { 
            background: linear-gradient(45deg, #ff9a56 0%, #ffad56 100%);
            color: white;
            box-shadow: 0 4px 15px rgba(255, 154, 86, 0.3);
        }
        .coverage-low { 
            background: var(--warning-gradient);
            box-shadow: 0 4px 15px rgba(245, 87, 108, 0.3);
        }

        /* 工具栏增强 */
        #toolbar {
            background: linear-gradient(90deg, #f8f9fa, #ffffff);
            padding: 15px;
            border-radius: 8px;
            border: 1px solid #e9ecef;
            margin-bottom: 20px !important;
        }
        
        #toolbar .btn {
            margin-right: 8px;
            font-size: 12px;
            padding: 8px 16px;
            border-radius: 6px;
            font-weight: 500;
        }
        
        .btn-info {
            background: var(--secondary-gradient);
            border: none;
            color: white;
        }
        
        .btn-success {
            background: var(--success-gradient);
            border: none;
            color: white;
        }
        
        .btn-danger {
            background: var(--warning-gradient);
            border: none;
            color: white;
        }

        /* 搜索表单增强 */
        .form-control {
            border: 2px solid #e9ecef;
            border-radius: 8px;
            padding: 10px 15px;
            transition: all 0.3s ease;
            font-size: 13px;
        }
        
        .form-control:focus {
            border-color: #667eea;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
            outline: none;
        }
        
        /* 查询区域样式修复 */
        .select-list {
            margin: 0;
            padding: 0;
        }
        
        .select-list ul {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            flex-wrap: wrap;
            align-items: end;
            gap: 15px;
        }
        
        .select-list ul li {
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            min-width: 200px;
            align-items: flex-start;
        }
        .select-list ul li:last-child {
            min-width: auto;
            flex-direction: row;
            align-items: center;
            gap: 10px;
            margin-top: 20px;
        }
        
        .select-list ul li label {
            font-weight: 600;
            color: #495057;
            margin-bottom: 8px;
            font-size: 13px;
            display: block;
            width: 100%;
            text-align: left;
            line-height: 1.2;
        }
        
        .select-list ul li .form-control {
            width: 100%;
            margin: 0;
        }
        
        .select-list ul li label i {
            color: #667eea;
            margin-right: 5px;
        }

        /* 响应式优化 */
        @media (max-width: 768px) {
            .business-header {
                padding: 20px;
            }
            .business-header h1 {
                font-size: 22px;
            }
            .search-panel, .table-container {
                padding: 15px;
            }
        }

        /* 加载动画 */
        .table-loading {
            position: relative;
        }
        .table-loading::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(255,255,255,0.8);
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>
<body class="gray-bg">
<div class="container-div">
    <!-- 商务风格头部 -->
    <div class="business-header">
        <h1><i class="fa fa-chart-line"></i>覆盖率报告管理中心</h1>
    </div>
    
    <div class="row">
        <div class="col-sm-12">
            <div class="search-panel">
                <form id="formId">
                    <div class="select-list">
                        <ul>
                            <li>
                                <label><i class="fa fa-tag"></i> 报告ID：</label>
                                <input id="reportId" type="text" name="reportId" class="form-control" placeholder="请输入报告ID"/>
                            </li>
                            <li>
                                <label><i class="fa fa-cube"></i> 应用名称：</label>
                                <input type="text" name="appName" class="form-control" placeholder="请输入应用名称"/>
                            </li>
                            <li>
                                <a class="btn btn-business btn-rounded btn-sm" onclick="$.table.search()"><i
                                        class="fa fa-search"></i>&nbsp;搜索</a>
                                <a class="btn btn-secondary btn-rounded btn-sm" onclick="$.form.reset()"><i
                                        class="fa fa-refresh"></i>&nbsp;重置</a>
                            </li>
                        </ul>
                    </div>
                </form>
            </div>
        </div>

        <div class="col-sm-12">
            <div class="table-container">
                <div class="btn-group-sm" id="toolbar" role="group" style="margin-bottom: 15px;">
                    <a class="btn btn-business single disabled" onclick="$.operate.edit()"
                       shiro:hasPermission="server:report:edit">
                        <i class="fa fa-edit"></i> 修改
                    </a>
                    <a class="btn btn-danger multiple disabled" onclick="$.operate.removeAll()"
                       shiro:hasPermission="server:report:remove">
                        <i class="fa fa-remove"></i> 删除
                    </a>
                    <a class="btn btn-info" onclick="mergeReports()">
                        <i class="fa fa-exchange"></i> 合并报告
                    </a>
                    <a class="btn btn-success" onclick="$.table.exportExcel()" shiro:hasPermission="server:report:export">
                        <i class="fa fa-download"></i> 导出Excel
                    </a>
                </div>
                <div class="select-table table-striped">
                    <table id="bootstrap-table"></table>
                </div>
            </div>
        </div>
    </div>
</div>
<th:block th:include="include :: footer"/>
<script th:inline="javascript">
    var editFlag = [[${@permission.hasPermi('server:report:edit')}]];
    var removeFlag = [[${@permission.hasPermi('server:report:remove')}]];
    var prefix = ctx + "server/report";

    $(function () {
        var options = {
            url: prefix + "/list",
            createUrl: prefix + "/add",
            updateUrl: prefix + "/edit/{id}",
            removeUrl: prefix + "/remove",
            exportUrl: prefix + "/export",
            mergeReportsUrl: prefix + "/mergerReports",
            modalName: "代码覆盖率服务",
            columns: [{
                checkbox: true
            },
                {
                    field: 'reportId',
                    title: '报告id',
                    visible: false
                },
                {
                    field: 'appName',
                    title: '应用'
                },
                {
                    field: 'repositoryUrl',
                    title: '仓库地址'
                },
                {
                    field: 'versionStart',
                    title: '起始版本',
                    width: '5%',
                },
                {
                    field: 'versionNow',
                    title: '当前版本',
                    width: '5%',
                },
                {
                    field: 'reportDir',
                    title: 'report文件夹路径'
                },
                {
                    field: 'branchCounter',
                    title: '分支覆盖率',
                    formatter: function(value, row, index) {
                        return formatCoverage(value);
                    }
                },
                {
                    field: 'lineCounter',
                    title: '行覆盖率',
                    formatter: function(value, row, index) {
                        return formatCoverage(value);
                    }
                },
                {
                    field: 'classCounter',
                    title: '类覆盖率',
                    formatter: function(value, row, index) {
                        return formatCoverage(value);
                    }
                },
                {
                    field: 'createTime',
                    title: '创建时间',
                    sortable:true
                },
                {
                    field: 'createBy',
                    title: '创建人'
                },
                {
                    title: '操作',
                    align: 'center',
                    formatter: function (value, row, index) {
                        return '<a href="#" class="btn btn-business btn-xs" onclick="createMenuItem(\'' + row.reportHref + '\', \'' + row.appName + '\', \'' + row.reportId + '\')">' +
                               '<i class="fa fa-eye"></i> 查看报告</a>';
                    }
                }]
        };
        $.table.init(options);
    });

    /** 格式化覆盖率显示 */
    function formatCoverage(value) {
        if (!value || value === '') {
            return '<span class="coverage-badge coverage-low">未知</span>';
        }
        
        // 提取百分比数值
        var percentage = parseFloat(value.toString().replace('%', ''));
        var badgeClass = '';
        
        if (percentage >= 80) {
            badgeClass = 'coverage-high';
        } else if (percentage >= 60) {
            badgeClass = 'coverage-medium';
        } else {
            badgeClass = 'coverage-low';
        }
        
        return '<span class="coverage-badge ' + badgeClass + '">' + value + '</span>';
    }

    /** 创建选项卡 */
    function createMenuItem(dataUrl, appName, reportId) {
        // 使用应用名称-报告ID作为标签名称
        menuName = appName && reportId ? appName + '-' + reportId : (appName || dataUrl)
        dataIndex = $.common.random(1, 100),
            flag = true;
        if (dataUrl == undefined || $.trim(dataUrl).length == 0) return false;
        var topWindow = $(window.parent.document);
        // 创建选项卡带了参数时，data-id唯一标识截取？前的字符
        var dataId = "";
        if (dataUrl.indexOf('?') >= 0) {
            dataId = dataUrl.substring(dataUrl.indexOf('?'), dataUrl.length);
        } else {
            dataId = dataUrl;
        }
        // 选项卡菜单已存在
        $('.menuTab', topWindow).each(function () {
            console.log("thisdataId=" + $(this).data('id'));
            if ($(this).data('id') == dataId) {
                //选项卡菜单已存在先关闭，再重新打开
                $(this).remove();
            }
        });

        // 选项卡菜单不存在
        if (flag) {
            var str = '<a href="javascript:;" class="active menuTab" data-id="' + dataId + '">' + menuName + ' <i class="fa fa-times-circle"></i></a>';
            $('.menuTab', topWindow).removeClass('active');
            // 添加选项卡对应的iframe
            var str1 = '<iframe class="Jtest_iframe" name="iframe' + dataIndex + '" width="100%" height="100%" src="' + dataUrl + '" frameborder="0" data-id="' + dataId + '" seamless></iframe>';
            $('.mainContent', topWindow).find('iframe.Jtest_iframe').hide().parents('.mainContent').append(str1);
            // 添加选项卡
            $('.menuTabs .page-tabs-content', topWindow).append(str);
        }
        return false;
    }

    function mergeReports() {
        var rows = $.table.selectColumns("reportId");
        if (rows.length <=1) {
            $.modal.alertWarning("合并报告至少需要两条记录！");
            return;
        }
        $.modal.confirm("需要合并" + rows.length + "条数据吗?", function() {
            var url = prefix + "/mergerReports?ids=" + rows;
            var data ='';
            var config = {
                url: url,
                type: 'post',
                dataType: 'json',
                data: data,
                beforeSend: function () {
                    $.modal.loading("正在合并中，请稍后...");
                },
                success: function (result) {
                    $("#reportId").val(result.msg)
                    $.table.search()
                    $.modal.closeLoading();
                }
            };
            $.ajax(config)
        });
    }

</script>

</body>
</html>